<template>
  <div>
    <button @click="demoxe()">xe</button>
    <button @click="circle()">框选</button>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    demoxe() {
      console.log("点击了xe")
      // var pin = new XE.Obj.Pin(earth)
      // pin.creating = true
      // pin.name = "创建点"
      // pin.isCreating = true
      var Line = new XE.Obj.Polyline(earth)
      Line.creating = true
      Line.name = "创建线"
    },
    Kuangxuan(){
      var obj = {
    "czmObject": {
        "xbsjType": "GeoPolygon",
        "xbsjGuid": "10dd506e-84f1-44c5-b841-0bf086d02538",
        "name": "多边形",
        "positions": [
            [
                2.055380397821819,
                0.6544945701087664,
                0
            ],
            [
                2.0416633210586843,
                0.6547143712247226,
                0
            ],
            [
                2.040367113342585,
                0.6638989235322484,
                9.313225746154785e-10
            ],
            [
                2.040122064229914,
                0.6681681673458173,
                0
            ],
            [
                2.051298740799529,
                0.6684833885701389,
                0
            ]
        ]
    }
}
    },
    // 画圈的单击事件方法
    circle() {
      // 圈选
      // drawingMode = "circle";
      function drawShape(positionData) {
        var shape;
        //圈选
        if (drawingMode === "polygon") {
          shape = earth.czm.viewer.entities.add({
            polygon: {
              hierarchy: positionData,
              material: new Cesium.ColorMaterialProperty(
                Cesium.Color.RED.withAlpha(0.7)
              ),
            },
          });
        } else if (drawingMode === "circle") {
          // 画圈
          var value =
            typeof positionData.getValue === "function"
              ? positionData.getValue(0)
              : positionData;

          shape = earth.czm.viewer.entities.add({
            position: activeShapePoints[0],
            name: "Blue translucent, rotated, and extruded ellipse with outline",
            type: "Selection tool",
            ellipse: {
              semiMinorAxis: new Cesium.CallbackProperty(function () {
                // 半径  两点之间的距离
                var r = Math.sqrt(
                  Math.pow(value[0].x - value[value.length - 1].x, 2) +
                    Math.pow(value[0].y - value[value.length - 1].y, 2)
                );
                return r ? r : r + 1;
              }, false),
              semiMajorAxis: new Cesium.CallbackProperty(function () {
                var r = Math.sqrt(
                  Math.pow(value[0].x - value[value.length - 1].x, 2) +
                    Math.pow(value[0].y - value[value.length - 1].y, 2)
                );
                return r ? r : r + 1;
              }, false),
              // 圈的颜色
              // material: Cesium.Color.BLUE.withAlpha(0.5),
              material: Cesium.Color.RED.withAlpha(0.5),
              outline: true,
            },
          });
        }

        return shape;
      }
      //绘制点
      function createPoint(worldPosition) {
        var point = earth.czm.viewer.entities.add({
          position: worldPosition,
          // point: {
          //   color: Cesium.Color.WHITE,
          //   pixelSize: 5,

          //   heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
          // },
          billboard: {
            // image: require("../../../assets/operation/image/坐标logo.png"),
            // verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            // scale:2,  //图片的比例大小
          },
        });
        return point;
      }
      // 鼠标左击单击事件
      var activeShapePoints = [];
      var activeShape;
      var floatingPoint;
      var handler = new Cesium.ScreenSpaceEventHandler(earth.czm.viewer.canvas);
      handler.setInputAction(function (event) {
        var earthPosition = earth.czm.viewer.scene.pickPosition(event.position);
        // `earthPosition` will be undefined if our mouse is not over the globe.
        if (Cesium.defined(earthPosition)) {
          if (activeShapePoints.length === 0) {
            floatingPoint = createPoint(earthPosition);
            activeShapePoints.push(earthPosition);
            var dynamicPositions = new Cesium.CallbackProperty(function () {
              // 画面
              if (drawingMode === "polygon") {
                return new Cesium.PolygonHierarchy(activeShapePoints);
              }
              return activeShapePoints;
            }, false);
            activeShape = drawShape(dynamicPositions);
          }
          activeShapePoints.push(earthPosition);
          createPoint(earthPosition);
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
      //鼠标的移动事件
      handler.setInputAction(function (event) {
        if (Cesium.defined(floatingPoint)) {
          var newPosition = earth.czm.viewer.scene.pickPosition(
            event.endPosition
          );
          if (Cesium.defined(newPosition)) {
            floatingPoint.position.setValue(newPosition);
            activeShapePoints.pop();
            activeShapePoints.push(newPosition);
          }
        }
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
      //鼠标右击事件
      handler.setInputAction(function (event) {
        terminateShape();
        // 销毁单击事件
        handler.destroy();
      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
      earth.czm.viewer.scene.globe.depthTestAgainstTerrain = true;
      const objConfig = {};
      // earth.sceneTree.root.children.push(scene);
      this._earth = earth;
      window.earth = earth;
      //重新绘制形状，使它不是动态的，并删除动态形状。
      function terminateShape() {
        activeShapePoints.pop();
        drawShape(activeShapePoints);
        earth.czm.viewer.entities.remove(floatingPoint);
        earth.czm.viewer.entities.remove(activeShape);
        floatingPoint = undefined;
        activeShape = undefined;
        activeShapePoints = [];
      }
    },
  },
}
</script>

<style></style>
